<template>
	<view class="contener">
		<u-loading-page :loading="loadingShow" bgColor="#ffffff94;" loadingColor="#ff7f50" color="#ff7f50;"
			loadingText="拼单商品正在赶来中..." fontSize="30rpx"></u-loading-page>
		<!-- 	<u-popup :show="propShow" mode="center" @close="propShow=false" :round="10" closeable bgColor="#ffffff00"
			closeOnClickOverlay="false">
			<view>
				<u--image @load="playAudio" :showLoading="true"
					src="https://www.tdtye.com/files/vegetable_mall_file/default/217.png" width="640rpx" height="850rpx"
					radius="30rpx"></u--image>
			</view>
		</u-popup> -->
		<view class="imgBox">
			<image :src="imgApi+'/files/vegetable_mall_file/default/groupBanner.jpg'"></image>
		</view>
		<view class="notice">
			<u-notice-bar :text="notice" mode="closable" bgColor="#ff6348" color="#fff"></u-notice-bar>
		</view>
		<view class="cardList">
			<view class="cardBox" v-for="(item,index) in data" @click="goToDetail(item.id)">
				<view class="avatarBox">
					<image :src="imgApi+item.avatar" mode="scaleToFill">
					</image>
				</view>
				<view class="content">
					<view class="title">
						<view class="overflow"><text>{{item.title}}</text></view>
						<!-- 				<view class="cashBack">
							<image :src="imgApi+'/files/vegetable_mall_file/default/cashBack.png'"></image>
						</view> -->
						<!-- <view class="cashBackBox">
							<text>{{item.totalCashBack}}元</text>
						</view> -->
					</view>
					<view class="overview">
						<text
							v-if="item.successGear-item.buyCount>=1">还差{{item.successGear-item.buyCount}}件每人每件可返现{{Math.floor((item.currentPrice-item.cashBack) * 100) / 100}}元</text>
						<text v-else>拼单火爆！当前已达最优惠价</text>
					</view>
					<view class="progress">
						<u-line-progress :percentage="getJinDu(item)" activeColor="#fb5b5c" inactiveColor="#fdd4d1">
						</u-line-progress>
						<text class="count">已拼{{item.sales}}件</text>
					</view>
					<view class="groupUser">
						<view v-for="(avatar,sonIndex) in item.usAvatar">
							<u--image :showLoading="true" :src="avatar" shape="circle" width="40rpx" height="40rpx">
							</u--image>
						</view>
						<text class="count"
							style="font-size: 25rpx;">{{item.usAvatar.length==0?"快来做第一个开团的人吧~":"等人正在拼团"}}</text>
					</view>
					<view class="buyPrice">
						<view>
							<text>拼团价:</text>
							<text>{{item.currentPrice}}元</text>
						</view>
						<view style="margin-left: 10rpx;">
							<text style="font-size: 16rpx;color: #d2d2d2;font-weight: 100;">原价:</text>
							<text
								style="font-size: 22rpx;color: #d2d2d2;text-decoration:line-through;font-weight: 100;">{{item.originPrice}}元</text>
						</view>
						<view class="goPd">
							<text>去拼单 ></text>
						</view>
					</view>
				</view>
			</view>

		</view>
		<uni-load-more :status="status" :icon-size="14" :content-text="contentText" v-if="status==more" />
	</view>
</template>

<script>
	import service from "../../utils/service";

	export default {
		data() {
			return {
				notice: "现在购买超值拼单优惠商品，邀请好友一起来拼，他更优惠，你有返现！",
				propShow: true,
				loadingShow: true,
				data: [],
				list: [],
				params: {
					pageNo: 1,
					pageSize: 3,
					url: "user/public/groupGoodsList",
					lng: "",
					lat: ""
				},
				imgApi: this.$reqConfig.URLIMAGE,
				status: 'more',
				ifBottomRefresh: false,
				contentText: {
					contentdown: ' ',
					contentrefresh: ' ',
					contentnomore: '更多超值返现商品敬请期待~'
				},
			}
		},
		onLoad(e) {
			this.loadingShow = true
			this.status = "more"
			this.params.lat = uni.getStorageSync("dingwei").latitude
			this.params.lng = uni.getStorageSync("dingwei").longitude
			if (typeof this.params.lat === "undefined" || typeof this.params.lng === 'undefined') {
				let t = this;
				service.getLocation(t, {
					ok: function(t, res) {
						console.log("回调1")
						t.params.lat = res.latitude;
						t.params.lng = res.longitude;
						uni.setStorageSync({
							key: 'dingwei',
							data: {
								longitude: res.longitude,
								latitude: res.latitude,
							},
						});
						t.cleanList()
						t.getlist()
					}
				})
			} else {
				this.$nextTick(function() {
					this.cleanList()
					this.getlist()
				})
			}
		},
		onPullDownRefresh() {
			this.latitude = uni.getStorageSync("dingwei").latitude
			this.longitude = uni.getStorageSync("dingwei").longitude
			this.cleanList()
			this.getlist()
		},
		onReachBottom() {
			console.log("触底", this.status)
			if (this.status != 'noMore') {
				this.status = 'loading';
				this.ifBottomRefresh = true
				this.getlist()
			}
		},
		methods: {
			//清除表单
			cleanList() {
				this.data = [];
				this.params.pageNo = 1
				this.params.pageSize = 4
				this.params.url = "user/public/groupGoodsList"
				const token = wx.getStorageSync('token')
				this.status = 'loading';
				this.ifBottomRefresh = true
			},
			getJinDu(item) {
				let a = (100 - (((item.successGear - item.buyCount) / item.successGear) * 100)).toFixed(2)
				if (isNaN(a)) {
					return 100;
				} else {
					return a;
				}
			},
			goToDetail(id) {
				console.log("点击")
				uni.navigateTo({
					url: `/pageA/shop/bulkDetail?id=` + id
				})

			},
			//获取列表
			getlist() {

				this.$nextTick(function() {
					const that = this;
					this.$axios({
						url: this.params.url,
						method: "post",
						data: {
							lng: this.params.lng,
							lat: this.params.lat,
							pageNo: this.params.pageNo,
							pageSize: this.params.pageSize,
						}
					}).then((res) => {
						this.list = res.result.list
						//请求接口成功之后，判断加载状态，处理数据						
						if (res.result.pages >= this.params.pageNo) {
							if (this.ifBottomRefresh) {
								this.data = this.data.concat(res.result.list)
							} else {
								this.data = res.result.list
							}
						} else {
							this.status = 'noMore'
						}
						if (this.params.pageNo >= res.result.pages) {
							this.status = 'noMore'
						}
						this.params.pageNo++;
						this.loadingShow = false
						uni.stopPullDownRefresh()
					})
				})
			},
			playAudio() {
				const innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = true;
				innerAudioContext.src = 'https://www.tdtye.com/files/vegetable_mall_file/default/jinbi.wav';
				innerAudioContext.onPlay(() => {
					console.log('开始播放');
				});
			}
		},
	}
</script>

<style lang="scss">
	// page {
	// 	height: initial;
	// 	overflow-y: initial;
	// 	min-height: 100vh;
	// }

	// ::-webkit-scrollbar {
	// 	display: none;
	// }

	.u-popup__content.data-v-3a231fda {
		// margin-top: 100%;
		background-color: #fff0;
	}

	.imgBox {
		width: 750rpx;
		height: 500rpx;
		position: absolute;
		overflow: hidden;
		border-radius: 0 0 140rpx 140rpx;

		image {
			z-index: -1;
			width: 100%;
			height: 600rpx;

		}
	}

	.notice {
		position: absolute;
		margin: 365rpx 0rpx 10rpx 45rpx;
		width: 675rpx;
	}

	.cardList {
		position: absolute;
		margin: 400rpx 0rpx 10rpx 45rpx;


		.cardBox {
			display: flex;
			margin: 30rpx 0rpx;
			box-shadow: 0rpx 2rpx 10rpx #dfdfdf;
			border-radius: 20rpx;
			background-color: #FFF;
			width: 675rpx;
			height: 285rpx;
			padding: 15rpx 0rpx 15rpx 30rpx;
			box-sizing: border-box;
			position: relative;

			.avatarBox {
				width: 240rpx;
				margin-top: 17rpx;

				image {
					border-radius: 20rpx;
					height: 220rpx;
					width: 220rpx;
					// margin-left: 0rpx;
				}
			}

			.count {
				margin-left: 15rpx;
				font-size: 20rpx;
				color: #b6b6b6;
			}

			.content {
				.overview {
					margin: 8rpx 0rpx;
					letter-spacing: 1rpx;
					font-size: 20rpx;
				}

				.buyPrice {
					display: flex;

					view:nth-child(1) {
						text:nth-child(1) {
							font-size: 20rpx;
						}
					}

					view:nth-child(2) {
						text {
							font-size: 30rpx;
						}
					}

					text {
						font-weight: 600;
						color: #fb5b5d;
					}

					.goPd {
						font-size: 25rpx;
						right: 10px;
						position: absolute;
						bottom: 47rpx;
					}
				}

				.groupUser {
					margin: 14rpx 0rpx;
					display: flex;
					height: 35rpx;
				}

				.progress {
					margin: 5rpx 0rpx;
					display: flex;
					width: 380rpx;
				}

				.title {
					margin: 8rpx 0rpx;
					font-weight: 600;
					display: flex;

					.overflow {
						width: 380rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}



					.cashBack {
						margin-right: 20rpx;
						bottom: 170rpx;
						right: -2rpx;
						position: absolute;
						z-index: 3;

						image {
							width: 130rpx;
							height: 140rpx;
						}
					}

					.cashBackBox {
						position: absolute;
						transform: rotate(349deg);
						width: 130rpx;
						height: 20rpx;
						right: 20rpx;
						z-index: 999;
						text-align: center;
						font-size: 35rpx;
						color: #fff;
						top: 5rpx;
						text-shadow: 0 0 5px #ff925e, 0 0 5px #ff5a5a;
						font-weight: 900;
					}
				}
			}
		}
	}
</style>
